<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="../static/script/jquery-1.7.2.js"></script>
<script type="text/javascript" >
  $(function (){
      $("#ajaxBtn").click(function (){
        alert("hello");
        $.ajax({
          url:"http://localhost:8080/book/ajaxServlet",
          data:{action:"JQueryAjax"},
          type:"GET",
          async:true,
          success:function (data){
            alert(data);
            $("#msg").html("编号：" + data.id)
          },
          dataType:"json"
        });
      });
  });
</script>
<body>
<div>
  <button id="ajaxBtn">$.ajax请求</button>
  <button id="getBtn">$.get请求</button>
  <button id="postBtn">$.post请求</button>
  <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg">

</div>

<br/><br/>
<form id="form01" >
  用户名：<input name="username" type="text" /><br/>
  密码：<input name="password" type="password" /><br/>
  下拉单选：<select name="single">
  <option value="Single">Single</option>
  <option value="Single2">Single2</option>
</select><br/>
  下拉多选：
  <select name="multiple" multiple="multiple">
    <option selected="selected" value="Multiple">Multiple</option>
    <option value="Multiple2">Multiple2</option>
    <option selected="selected" value="Multiple3">Multiple3</option>
  </select><br/>
  复选：
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
  单选：
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>